<template>
	<view class="pay-ment">
		<view class="top-box">
			<view class="top-content">
				<view class="img-box">
					<image class="img" :src="goodsMsg.image_url" mode=""></image>
				</view>
				<view class="text-content">
					<view class="title">
						{{goodsMsg.name}}
					</view>
					<text class="text">库存{{goodsMsg.stock}}件</text>
					<view class="price-text">
						<text class="red">￥{{goodsMsg.price}}</text>
						<text class="grey">官方价：{{goodsMsg.official_price}}</text>
					</view>
				</view>
			</view>
			<view class="cell-item">
				<text class="label">购买数量</text>
				<view class="right-box">
					<!-- #ifdef MP-WEIXIN -->
					<van-stepper :value="forminline.quantity" @change="onChangeQuantity"/>
					<!-- #endif -->
				</view>
			</view>
			<view class="cell-item">
				<text class="label">充值方式</text>
				<view class="right-box">
				   <text>{{modeText}}</text>	
				</view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="input-box">
			<van-field
				:value="forminline.mobile"
				required
				type="number"
				clearable
				label="手机号"
				placeholder="请输入手机号"
				@change="onChangeMobile"
			/>
			<view v-if="goodsDatas.delivery_mode === 2">
                <van-field 
					:value="forminline.target_account" 
					@change="onChangetarget" 
					required 
					label="充值账户" 
					placeholder="请输入充值账户"
				/>
            </view>
            <view v-if="goodsDatas.delivery_mode === 3">
                <van-field 
					:value="forminline.target_account"
					@change="onChangetarget"  
					required 
					label="充值账户" 
					placeholder="请输入充值账户"
				/>
                <van-field 
					:value="forminline.password" 
					@change="onChangepsd"
					type="password" 
					label="密码" 
					placeholder="请输入密码"
				/>
            </view>
			<view class="input-item">
				<text class="label">充值方式</text>
				<view class="right-box">
				    <van-radio-group :value="forminline.pay_method" @change="changePay" direction="请选择">
                        <van-radio :name="1" checked-color="#F49e37">支付宝</van-radio>
                        <van-radio :name="2" checked-color="#F49e37">微信</van-radio>
                    </van-radio-group>
				</view>
			</view>
			<van-field
                :value="forminline.remark"
				@change="onChangeRemark"
                label="留言"
                placeholder="请输入留言"
            />
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<van-submit-bar
			safe-area-inset-bottom
			:loading="loading"
			:price="goodsPrice"
			button-text="提交订单"
			@submit="onSubmit"
		>
			<view class="name-text">共计{{forminline.quantity}}件</view>
		</van-submit-bar>
		<!-- #endif -->
	</view>
</template>
<script>
	export default {
		name:"payMent",
		data(){
			return {
				loading:false,
				forminline:{
					product_id: "",
					quantity: 1,
					mobile: "",
					target_account: "",
					password:"",
					remark:"",
					channel:"",
					pay_method:1,
				},
			}
		},
		computed:{
			goodsMsg(){
				return this.$store.state.goodsData;
			},
			modeText(){
				var num = this.goodsMsg.delivery_mode;
				var text = "";
				switch (num) {
					case 1:
						text = "激活码";
						break;
					case 2:
						text = "无密充值";
						break;
					case 3:
						text = "有密码充值";
						break;
					default:
						break;
				}
				return text;
			},
			userData(){
				var data = this.$store.state;
				return {
					channel:data.channel,
					phone_no:data.phone_no
				}
			},
			goodsPrice(){
				var num = this.goodsMsg.price,
				tatol = this.forminline.quantity;
				var aValue = num * tatol;
				return Math.floor(aValue * 100)
			}
		},
		onLoad() {
			this.$setTopBar({title:"填写订单"});
		},
		methods:{
			onChangeQuantity(event){
				this.forminline.quantity = event.detail
			},
			onChangeMobile(event){
				this.forminline.mobile = event.detail;
			},
			onChangepsd(event){
				this.forminline.password = event.detail;
			},
			onChangetarget(event){
				this.forminline.target_account = event.detail;
			},
			onChangeRemark(event){
				this.forminline.remark = event.detail;
			},
			changePay(event){
				this.forminline.pay_method = event.detail
			},
		    async onSubmit(){
				console.log(this.forminline);
				try {
					this.loading = true;
					this.forminline.channel = this.userData.channel;
					setTimeout(()=>{
						this.loading = false;
					},1000)
				} catch (e) {
					Toast.fail(e.errMsg);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./style/payment.scss";
</style>
